<template>
	<div>
		<van-row>
			<div style="margin: 1rem auto;text-align: center;">
				<!-- <div style="font-size: 24px;">{{product.title}}</div> -->
				<!-- <van-rate v-model="value" :size="15" color="#ffd21e" void-icon="star" void-color="#eee"
					style="text-align: center;margin: 0.5rem auto 0;" /> -->

				<div style="font-size: 24px;">{{product.title}}</div>
			</div>
			<div style="text-align: center; width: 32rem;margin: 1rem auto;">
				<van-image width="70%" style="margin: 0 auto;" :src="APIDomainName + product.pic"></van-image>
			</div>

			<!-- <div>
				<van-cell-group inset>
					<van-cell  title="售价" :value="`¥${amount.toFixed(2)}`" />
					<van-cell title="花语" :value="product.flowerlanguage" />
					<van-cell title="材料" :value="product.material" />
					<van-cell title="包装" :value="product.wrap" />
					<van-cell title="配送说明" :value="product.distribution" />
					<van-cell title="说明" :value="product.illustrate" />
					<van-cell>
						<template #default>
							<div class="count-buy">
								<div>购买数量</div>
								<van-stepper v-model="count" integer />
								<van-button type="primary" size="small" @click="onClickAddShopcart">加入购物车
								</van-button>
							</div>
						</template>
					</van-cell>
				</van-cell-group>
			</div> -->

			<div style="margin: 0 auto;width: 22.5rem;">
				<span style="font-size: 16px;font-weight: bold;color: red;">￥<span style="font-size: 26px;">
						{{product.price}}
					</span></span><span style="font-size: 14px;color: darkgrey">价格</span>

				<div style="color: #6c757d;">花语<span style="margin-left: 2rem;color: black;">象征着是“纯洁的爱情”和“珍贵的友谊”</span>
				</div>
				<div style="color: #6c757d;">材料<span style="margin-left: 2rem;color: black;">蝴蝶兰-室内盆栽（5株白色一品蝴蝶兰）</span>
				</div>
				<div style="color: #6c757d;">包装<span style="margin-left: 2rem;color: black;">白色陶瓷花盆。</span></div>
				<div style="color: #6c757d;">配送<span style="margin-left: 2rem;color: black;">限送全国大、中城市</span></div>
				<div style="color: #6c757d;">说明<span style="margin-left: 2rem;color: black;">提前一天订购</span></div>
			</div>
			<div style="margin: 0 auto;width: 24rem;">
				<div style="display: flex;align-items: center;">
					<van-cell style="width: 20rem;">
						<template #default>
							<div class="count-buy">
								<div>购买数量</div>
								<van-stepper v-model="count" integer />
								<van-button type="primary" size="small" @click="onClickAddShopcart">加入购物车
								</van-button>
							</div>
						</template>
					</van-cell>
					<div style="margin-left: 2rem;">
						<div v-if="isCollection" @click="onClickAddCollection()">
							<van-icon name="star-o" size="25" />
						</div>
						<div v-else @click="onClickCancelCollection(product.id)">
							<van-icon name="star" size="25" color="#fa9d06" />
						</div>
						<div style="font-size: 14px;">收藏</div>
					</div>
				</div>
			</div>
		</van-row>
		<van-button type="primary" size="large" @click="onBack">返回</van-button>
	</div>

</template>



<script>
	import {
		addCartAPI
	} from "@/api/cart.js"; //将商品添加购物车接口，根据id获取商品对象（详情）
	import {
		getProductDetailByIdAPI
	} from "@/api/product.js";
	import {
		addCollectionAPI,
		delCollectionItemAPI,
		ischeckedCollectionAPI
	} from "@/api/collection.js";
	import * as Tools from "@/utils/tools.js"

	export default {
		data() {
			return {
				value: 3,
				product: {},
				count: 0,
				amount: 0,
				isCollection: true
			}
		},

		methods: {
			onBack() {
				this.$router.go(-1);
			},
			onClickAddShopcart() {
				let params = {
					product_id: this.product.id,
					count: this.count,
				};
				//2.使用封装后的接口,注意：接口有参数
				addCartAPI(params).then(result => {
					this.$toast(result.msg);
				}).catch(() => {});
			},


			onClickAddCollection() {
				let params = {
					product_id: this.product.id,
				};
				//2.使用封装后的接口,注意：接口有参数
				addCollectionAPI(params).then(result => {
					this.$toast(result.msg);
				}).catch(() => {});
				this.isCollection = false;

			},
			onClickCancelCollection(id) {
				this.isCollection = true;
				let ids = id;
				delCollectionItemAPI(ids).then(result => {
					this.$toast(result.msg);
				}).catch(() => {});

			}
		},
		computed: {
			shelfTime() {
				let date = new Date(this.product.shelf_time);
				// console.log(date instanceof Date);
				return Tools.dateFormat(date, "yyyy年MM月dd日");
			}
		},
		created() {
			let id = this.$route.params.id;
			getProductDetailByIdAPI(id).then((result) => {
				console.log(result);
				this.product = result.data;
				this.amount = result.data.price;

				let params = {
					product_id: this.product.id,
				};
				//2.使用封装后的接口,注意：接口有参数
				ischeckedCollectionAPI(params).then(result => {
					// this.$toast(result.msg);
					let is_checked = result.data[0].is_checked;
					if (is_checked = 1) {
						this.isCollection = false
					}
				}).catch(() => {});

			})
		}
	}
</script>



<style lang="less" scoped>
	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		line-height: 150px;
		text-align: center;
		background-color: white;
	}

	.count-buy {
		display: flex;
		flex-direction: row;
		margin: 10px 0px;
		justify-content: space-between;
	}
</style>
